<template>
  <div class="app-container">
    <div class="filter-container">
      <search ref="searchForm" :rq="defaultRq" @change="change(arguments)" />
      <div class="filter-item">
        <el-button v-waves :loading="listLoading" class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleSearch">查询</el-button>
      </div>
      <div class="filter-item">
        <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" size="small" icon="el-icon-download" @click="handleDownload">导出</el-button>
      </div>
    </div>
    <el-table v-loading="listLoading" :data="list" size="mini" fit highlight-current-row style="width: 100%;" max-height="550">
      <el-table-column label="线路名称" align="center" width="150" fixed>
        <template slot-scope="{ row }">
          <span>{{ row.xlmc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属企业" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.yhjc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运营时间" align="center" width="70">
        <template slot-scope="{ row }">
          <span>{{ row.yysj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调度方式" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.ddfs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额定配车数" align="center" width="60">
        <template slot-scope="{ row }">
          <span>{{ row.pc_jh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="早高峰" align="center">
        <el-table-column label="配车数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.pc_zgf }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上行班次" align="center">
          <el-table-column label="时段" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.zgfsd_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_jh_zfg_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_zfg_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_zfg_sx }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="下行班次" align="center">
          <el-table-column label="时段" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.zgfsd_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_jh_zfg_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_zfg_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_zfg_xx }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="晚高峰" align="center">
        <el-table-column label="配车数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.pc_wgf }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上行班次" align="center">
          <el-table-column label="时段" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.wgfsd_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_jh_wfg_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_wfg_sx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_wfg_sx }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="下行班次" align="center">
          <el-table-column label="时段" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.wgfsd_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_jh_wfg_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_wfg_xx }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_wfg_xx }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="高峰班次" align="center">
        <el-table-column label="计划数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.gaofeng_jh_bc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.gaofeng_bc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行率(%)" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.gaofeng_bc_ly }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="pagination-class">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getXlgfPage, getXlgfOutput } from '@/api/xlgjday';
import waves from '@/directive/waves';
import Pagination from '@/components/Pagination';
import { formatJson, parseTime } from '@/utils';
import Search from '@/views/database/searchByDate.vue';

export default {
  name: 'Xlgf',
  components: { Pagination, Search },
  directives: { waves },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      downloadLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        rq: '',
        yhid: '',
        jgxlid: null
      },
      defaultRq: ''
    };
  },
  created() {
    const nowDate = new Date();
    const beforeDate = nowDate.setDate(nowDate.getDate() - 2);
    this.defaultRq = parseTime(beforeDate, '{y}-{m}-{d}');
    this.listQuery.rq = this.defaultRq;
    this.getList();
  },
  methods: {
    async getList() {
      if (this.listQuery.rq === '' || this.listQuery.rq === null) {
        this.$message.error('请选择日期');
        return;
      }
      this.listLoading = true;
      await getXlgfPage(this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    async handleSearch() {
      this.getList();
    },
    change(data) {
      if (data[0] === 'Yhxx') {
        this.listQuery.yhid = data[1];
      } else if (data[0] === 'Xl') {
        this.listQuery.jgxlid = data[1];
      } else if (data[0] === 'Rq') {
        this.listQuery.rq = data[1];
      }
    },
    async handleDownload() {
      if (this.total === 0) {
        this.$message.error('暂无数据');
        return;
      }
      this.downloadLoading = true;
      await getXlgfOutput(this.listQuery).then(response => {
        if (this.listQuery.rq === '') {
          this.$message.error('请选择日期');
          return;
        }
        if (response.data.length === 0) {
          this.$message.error('暂无数据，请重新刷新页面');
          return;
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['线路名称', '所属企业', '运营时间', '调度方式', '额定配车数', '早高峰配车数', '早高峰上行时段', '早高峰上行班次计划数', '早高峰上行班次执行数', '早高峰上行班次执行率(%)', '早高峰下行时段', '早高峰下行班次计划数', '早高峰下行班次执行数', '早高峰下行班次执行率(%)', '晚高峰配车数', '晚高峰上行时段', '晚高峰上行班次计划数', '晚高峰上行班次执行数', '晚高峰上行班次执行率(%)', '晚高峰下行时段', '晚高峰下行班次计划数', '晚高峰下行班次执行数', '晚高峰下行班次执行率(%)', '高峰班次计划数', '高峰班次执行数', '高峰班次执行率(%)'];
          const filterVal = ['xlmc', 'yjhc', 'yysj', 'ddfs', 'pc_jh', 'pc_zgf', 'zgfsd_sx', 'bc_jh_zfg_sx', 'bc_zfg_sx', 'bcl_zfg_sx', 'zgfsd_xx', 'bc_jh_zfg_xx', 'bc_zfg_xx', 'bcl_zfg_xx', 'pc_wgf', 'wgfsd_sx', 'bc_jh_wfg_sx', 'bc_wfg_sx', 'bcl_wfg_sx', 'wgfsd_xx', 'bc_jh_wfg_xx', 'bc_wfg_xx', 'bcl_wfg_xx', 'gaofeng_jh_bc', 'gaofeng_bc', 'gaofeng_bc_ly'];
          const data = formatJson(response.data, filterVal);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '线路高峰时段班次配车信息'
          });
          this.downloadLoading = false;
          this.$message({
            message: '线路高峰时段班次配车信息导出成功',
            type: 'success'
          });
        });
      });
    }
  }
};
</script>
